<template>
  <div id="nav">
    <!-- <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> -->
    <div id="head">
      <div class="logo-box inline">
        <img src="./assets/Logo.png" alt="">
        <p class="pro-name">Information Safety Lab</p>
      </div>
      <div class="search-box inline">
        <input type="text">
        <img src="./assets/Search.png" alt="">
      </div>
      <div class="tabList inline">
        <router-link to="#">视频系统</router-link>
        <router-link to="#">实操平台</router-link>
        <router-link to="#">考试系统</router-link>
        <router-link to="#">比赛系统</router-link>
      </div>
      <div class="imgbox inline">
        <img src="./assets/Icon-user.png" alt="">
        <img src="./assets/Icon-meanue.png" alt="">
      </div>
    </div>
    <router-view/>
    <div id="footer">
      <p class="inline">实验室数据</p>
      <p class="inline right">2021</p>
    </div>
  </div>
</template>

<style>
*{
  padding:0;
  margin: 0;
}

.inline{
  display: inline-block;
  /* 解决div并排错位 */
  vertical-align:top;
}

.left{
  float: left;
}

.right{
  float: right;
}

#nav {
  width: 100%;
}

#head{
  height: 50.25px;
  background-color: #1D1D46;
  padding: 0 70px;
  position: relative;
}

#head .logo-box img{
  display: inline-block;
  position: absolute;
  top: calc(50% - 14px);
}

#head .logo-box .pro-name{
  color: white;
  font-size: 16.75px;
  line-height: 50.25px;
  display: inline-block;
  margin-left: 38px;
}

#head .search-box{
  background-color: #05050F;
  width: 440px;
  height: 26.8px;
  border-radius: 6.7px;
  margin-left: 170px;
  margin-top: calc(50.25px/2 - 13.4px);
}

#head .search-box input{
  outline: none;
  background-color: #05050F;
  border: none;
  width: 408px;
  color: white;
  padding-left: 20px;
  line-height: 26.8px;
  box-sizing: border-box;
}

#head .search-box img{
  position: absolute;
  top: calc(50% - 7px);
}

#head .tabList{
  margin-left: 100px;
  line-height: 50.25px;
  font-size: 13.4px;
}

#head .tabList a{
  color: #6A6A9F;
  font-size: 13.4px;
  text-decoration: none;
  margin-right: 70px;
}

#head .imgbox{
  margin-left: 256px;
}

#head .imgbox img{
  margin-top: calc(50.25px/2 - 9.5px);
  margin-right: 22px;
}

#footer{
  height: 32px;
  background-color: #191932;
  padding: 0 70px;
}

#footer p{
  line-height: 32px;
  color: #5A5A89;
  font-size: 9px;
}
/* #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
} */
</style>
